import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { useNavigate } from 'react-router-dom';

export interface ListState {
  "id": string,
  "title": string,
  "desc": string,
  "price": number,
  "image": string
}

const Index: React.FC = () => {
  const [list, setList] = useState<ListState[]>([]);
  const navigate = useNavigate()
  const fetchList = async () => {
    const resp = await axios.get('/api/list');
    setList(resp.data.data)
  }

  const handleOrder = (v: ListState) => {
    navigate('/order', {
      state: v
    })
  }

  useEffect(() => {
    fetchList()
  }, [])
  return (
    <div>
      {
        list.map(v => (
          <dl className='list-item' key={v.id}>
            <dt>
              <img src={v.image} alt="" />
            </dt>
            <dd>
              <h3>{v.title}</h3>
              <div>{v.desc}</div>
              <div>{v.price}---- <span onClick={() => handleOrder(v)}>立即购买</span> </div>
            </dd>
          </dl>
        ))
      }
    </div>
  )
}

export default Index